---
type: tutorial
title: Construisez-le vous-même - En-tête
description: >-
  Tutoriel : Construisez votre premier blog Astro —

  Utilisez tout ce que vous avez appris jusqu'à présent pour construire un en-tête 
  avec une navigation responsive
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';


Étant donné que votre site sera consulté sur différents appareils, créons une navigation de page qui puisse répondre à plusieurs tailles d'écran !

<PreCheck>
  - Créez un en-tête pour votre site contenant le composant Navigation
  - Rendez le composant Navigation responsive
</PreCheck>


<Box icon="puzzle-piece">

## Essayez par vous-même - Construisez un nouveau composant Header

<Steps>
1. Créez un nouveau composant Header. Importez et utilisez votre composant `Navigation.astro` existant à l'intérieur d'un élément `<nav>` qui se trouve à l'intérieur d'un élément `<header>`.

    <details>
    <summary>Montrez-moi le code !</summary>

    Créez un fichier nommé `Header.astro` dans `src/components/`
    ```astro title="src/components/Header.astro"
    ---
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Navigation />
      </nav>
    </header>
    ```

    </details>
</Steps>

</Box>




<Box icon="check-list">

## Essayez par vous-même - Mettez à jour vos pages

<Steps>
1. Sur chaque page, remplacez votre composant `<Navigation/>` existant par votre nouvel en-tête.

    <details>
    <summary>Montrez-moi le code !</summary>

    ```astro title="src/pages/index.astro" ins={3,18} del={2,17}
    ---
    import Navigation from '../components/Navigation.astro';
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Page d'accueil";
    ---
    <html lang="fr">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Navigation />
        <Header />
        <h1>{pageTitle}</h1>
        <Footer />
      </body>
    </html>
    ```
    </details>

2. Vérifiez votre aperçu de navigateur et vérifiez que votre en-tête est affiché sur chaque page. Il ne sera pas encore différent, mais si vous inspectez votre aperçu à l'aide des outils de développement, vous verrez maintenant des éléments tels que `<header>` et `<nav>` autour de vos liens de navigation.
</Steps>
</Box>

## Ajoutez des styles responsives

<Steps>
1. Mettez à jour `Navigation.astro` avec la classe CSS pour contrôler vos liens de navigation. Enveloppez les liens de navigation existants dans une balise `<div>` avec la classe `nav-links`.

    ```astro title="src/components/Navigation.astro" ins={3,7}
    ---
    ---
    <div class="nav-links">
      <a href="/">Accueil</a>
      <a href="/about">À propos</a>
      <a href="/blog">Blog</a>
    </div>
    ```

2. Copiez les styles CSS ci-dessous dans `global.css`. Ces styles :

    - Stylisent et positionnent les liens de navigation pour les appareils mobiles
    - Incluent une classe `expanded` qui peut être activée ou désactivée pour afficher ou masquer les liens sur mobile
    - Utilisent une requête `@media` pour définir des styles différents pour des tailles d'écran plus grandes

    :::tip[Conception Mobile-First]
    Commencez par définir ce qui doit se passer sur les petits écrans en premier ! Les écrans plus petits nécessitent des mises en page plus simples. Ensuite, ajustez vos styles pour les appareils plus grands. Si vous concevez d'abord le cas compliqué, vous devrez ensuite travailler pour le simplifier.
    :::

    ```css title="src/styles/global.css" ins={23-100}
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }

    /* Styles de la navigation */

    .nav-links {
      width: 100%;
      top: 5rem;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    .nav-links a:hover,
    .nav-links a:focus {
      background-color: #ff9776;
    }

    .expanded {
      display: unset;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }

    }
    ```
</Steps>

Redimensionnez votre fenêtre et recherchez les styles différents appliqués à différentes largeurs d'écran. Votre en-tête est maintenant **responsive** en fonction de la taille de l'écran grâce à l'utilisation de requêtes `@media`.



<Box icon="check-list">

## Liste de contrôle

<Checklist>
- [ ] Je peux utiliser CSS pour ajouter des éléments responsifs à mon site.
</Checklist>
</Box>

### Ressources

- [Conception basée sur les composants](https://www.droptica.com/blog/component-based-design/) <Badge>external</Badge>
- [Balises HTML sémantiques](https://www.dofactory.com/html/semantics) <Badge>external</Badge>
- [Conception mobile-first](https://www.mobileapps.com/blog/mobile-first-design) <Badge>external</Badge>
